<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>小米首页</title>
		<!-- 二.定义样式：复杂型页面三个简易结构，3次样式引用 -->
		<link rel="stylesheet" href="css/header.css" />
		<link rel="stylesheet" href="css/main.css" />
		<link rel="stylesheet" href="css/footer.css" />
	    <!-- 增加一个样式统一去掉页面默认效果 -->
	    <link rel="stylesheet" href="css/public.css" />
		<!-- 轮播图 -->
		<link rel="stylesheet" href="css/style.css" />
		<!-- 页尾 -->
		<link rel="stylesheet" href="css/public.css" />
		<link rel="stylesheet" href="css/footer.css" />
		<!-- 左栏 -->
		<script src="js/jquery-1.11.1.js"></script>
    </head>
	<body>
			<!-- 一.设计小米整体简易结构：页头，主体，页尾 
			    使用结构化标记：       header，main，footer
			-->
	<header>
			<!-- 控制页面：中控区 -->
					<div id="wrapper">
					<div class="header_left">
						<ul>
							<li><a href="#">小米网</a></li>
							<li><a href="#">MIUI</a></li>
							<li><a href="#">米聊</a></li>
							<li><a href="#">游戏</a></li>
							<li><a href="#">多看阅读</a></li>
							<li><a href="#">云服务</a></li>
							<li><a href="#">小米网移动版</a></li>
							<li><a href="#">问题反馈</a></li>
							<li><a href="#" class="c">Select Region</a></li>
						</ul>
					</div>
					<div class="header_right">
						<ul>
							<!-- 精灵图使用  icon图标
							 1.使用文本样式元素补位：i、b、s、u
							 2.使用矢量图，精灵图.png【不失真】
							 优点：避免多次命名、减少服务器请求
							 3.如果使用补位元素【行元素】，必须内边距【撑大】
							 4.定位
							 -->
							 <div class="jinmh"></div>
							<li class="li_right"><i class="shop"></i><a href="#" class="fix">购物车(0)</a></li>
							<li><a href="#" class="c1">注册</a></li>
							<li><a href="#">登录</a></li>
						</ul>
					</div>
					</div>
				</header>
				<script>
					 /* 实现：1.添加事件 li 2.切换效果 3.切换效果 */
					$("header div#wrapper div.header_right ul li").hover(function(){
					 // 弹出框 默认 隐藏 --抓弹出框 第一件事、显示
						 $("header div#wrapper div.header_right ul div.jinmh").css("display","block");
					 },function(){
					  $("header div#wrapper div.header_right ul div.jinmh").css("display","none");
					 })
				</script>
				<main>
					<!-- 面包屑导航 nav元素 -->
				<script>
						$(function(){
							var so=$("nav").offset().top;
							$(Window).scroll(function(){
							var st=$(window).scrollTop()
						if(st>so){
								$("nav").addClass("ac");
							}else{
								$("nav").removeClass("ac");
								}
						});
							});
						</script>
				<nav>
				<div class="nav_left">
				<div>
				<img src="./img/LOGO.png" alt="小米" />
				<img src="./img/donghua.gif" alt="欧洲" />
				</div>
				<div >
			<ul>
			<li><a href="#"></a>小米盒子</li>
			<li><a href="#"></a>红米</li>
			<li><a href="#"></a>平板</li>
			<li><a href="#"></a>电视</li>
			<li><a href="#"></a>盒子</li>
			<li><a href="#"></a>路由器</li>
			<li><a href="#"></a>智能硬件</li>
			<li><a href="#"></a>服务</li>
			<li><a href="#"></a>社区</li>
		    </ul>
		</div>
			</div>
		<div class="nav_right">
		<div class="search">
		<img src="./img/search.png" alt="放大镜" />
		</div>
		<div>
		<span>小米手机4c</span>
		<span>平衡车</span>
		</div>
		</div>
		</nav>
		<!-- 左栏区 -->
		<div class="figure_ri">
		<aside>
			<ul class="ul_sidebar">
				<div class="out"></div>
				<li>手机 平板 电话卡<span>></span></li>
				<li>电视 盒子<span>></span></li>
				<li>路由器 智能硬件<span>></span></li>
				<li>移动电源 插线板<span>></span></li>
				<li>耳机 音箱<span>></span></li>
				<li>电池 存储卡<span>></span></li>
				<li>保护套 后盖<span>></span></li>
				<li>贴膜 其他配件<span>></span></li>
				<li>米兔 服装<span>></span></li>
				<li>箱包 其他周边<span>></span></li>
			</ul>
		</aside>
		<script>
			 /* 左栏实现：1.添加事件 li 2.切换效果 3.切换效果 */
			$("aside ul.ul_sidebar li").hover(function(){
			 // 弹出框 默认 隐藏 --抓弹出框 第一件事、显示
				 $("aside ul.ul_sidebar div.out").css("display","block");
			 },function(){
			  $("aside ul.ul_sidebar div.out").css("display","none");
			 })
		</script>
		<!-- 轮播图 figure结构化元素：图片、图表\代码片段 -->
		
		<figure>
			<div id="animation"></div>
			<div class="container">
				<div class="banner" id="lazyload">
					<ul>
						<li><img src="img/banner01.jpg" alt="1" height="420px" /></li>
						<li><img src="img/banner02.jpg" alt="2" height="420px"/></li>
						<li><img src="img/banner03.jpg" alt="3" height="420px" /></li>
						<li><img src="img/banner04.jpg" alt="4" height="420px" /></li>
						<li><img src="img/banner05.jpg" alt="5" height="420px" /></li>
					</ul>
				</div>
			</div>
			</div>
			</figure>
			<script src="js/highlight.pack.js"></script>
			<script src="js/jquery-1.11.1.js"></script>
			<script src="js/jquery.terseBanner.min.js"></script>
			<script src="js/script.js"></script>
			<!-- 4个图片 -->
			<div class="pic">
				<ul class="pic_right">
					<img src="img/left.png" alt="1" height="157px" />
					<img src="img/subnav_icon01.png" alt="2" height="157px" />
					<img src="img/subnav_icon02.jpg" alt="3" height="157px" />
					<img src="img/subnav_icon03.png" alt="4" height="157px"/>
				</ul>
			</div>
			<!-- 文字 -->
			<div class="size">
				<div class="size_right">
					小米明星单品
				<img src="img/arrow_rightbtn01.png" alt="1" />
				<img src="img/arrow_leftbtn01.png" alt="2" />
			    </div>
			<!-- 结构：产品模块 -->
			<div class="container_star">
				<dl>
			       <dt>
					<img src="img/chazuo.png" alt="1" />
					 </dt>
					<dd>小米智能插座&nbsp;基础版</dd>
					<dd class="product_content">手机远程遥控，让普通电器变成智能</dd>
					<dd class="product_price">49元</dd>
					 </dl>
			</div>
			<div class="container_bar">
				<dl>
					<dt>
						<img src="img/jinghuaqi.png" alt="2" />
					</dt>
					<dd>小米空气净化器2</dd>
					<dd class="product_jing">净化能力高达310m3/h</dd>
					<dd class="product_yuan">699元</dd>
				</dl>
			</div>
			<div class="container_mm">
				<dl>
					<dt>
						<img src="img/chaban.png" alt="3" />
					</dt>
					<dd>小米智能插线板</dd>
					<dd class="product_cha">手机远程控制家中电器，智能节电</dd>
					<dd class="product_ban">69元</dd>
				</dl>
			</div>
			<div class="container_bb">
				<dl>
					<dt>
						<img src="img/erji.png" alt="4" />
					</dt>
					<dd>小米圈铁耳机</dd>
					<dd class="product_er">动圈+动铁，双发声单元</dd>
					<dd class="product_ji">69元</dd>
				</dl>
			</div>
			<div class="container_ff">
				<dl>
					<dt>
						<img src="img/luyouqi.png" alt="5" />
					</dt>
					<dd>小米路由器&nbsp;青春版</dd>
					<dd class="product_er">将高性能路由器，凝聚于掌心大小</dd>
					<dd class="product_ji">79元</dd>
				</dl>
			</div>
			</div>
			<!-- 智能硬件 -->
			<!-- 灰色背景图 -->
			<div class="star_left">
				<div class="starr">
					智能硬件
					</div>
				<div class="star_ee">
					查看全部
				<img src="img/hardware_morebtn.png" alt="1" />
				</div>
			</div>
			<!-- 小孩 -->
			<!-- 单个 -->
			<div class="hai">
					<div class="hai_mn">
					<img src="img/haraware_kid.png" alt="0" />
				</div>
				</div>
			
			<div class="hai_kk">
				<!-- 1 -->
				<div class="container_aa">
					<dl>
						<dt>
							<img src="img/haraware_tizhongcheng.png" alt="1" />
						</dt>
						<dd>小米体重秤</dd>
						<dd class="product_gao">高精度压力传感器，手机管理全家健康</dd>
						<dd class="product_jin">99元</dd>
					</dl>
				</div>
				<!-- 2 -->
				<div class="container_bn">
					<dl>
						<dt>
							<img src="img/haraware_luyouqi.png" alt="2" />
						</dt>
						<dd>小米路由器3</dd>
						<dd class="product_an">更安全更稳定，安全发售</dd>
						<dd class="product_wen">149元</dd>
					</dl>
				</div>
				<!-- 3 -->
				<div class="container_ds">
					<dl>
						<dt>
							<img src="img/haraware_shouhuan.png" alt="3" />
						</dt>
						<dd>小米手环&nbsp;光感版</dd>
						<dd class="product_shi">实时监测心率，科学运动</dd>
						<dd class="product_xin">99元</dd>
					</dl>
				</div>
				<!-- 4 -->
				<div class="container_gg">
					<dl>
						<dt>
							<img src="img/haraware_anfang.png" alt="4" />
						</dt>
						<dd>小米智能安防套装</dd>
						<dd class="product_neng">智能警戒，为您的家增添一份安心</dd>
						<dd class="product_jia">999元</dd>
					</dl>
				</div>
			</div>
			<div class="hai_ff">
				<!-- 5 -->
				<div class="container_ll">
					<dl>
						<dt>
							<img src="img/haraware_xiaoyi.png" alt="5" />
						</dt>
						<dd>小米运动相机</dd>
						<dd class="product_wan">边玩边录边拍，手机随时分享</dd>
						<dd class="product_lu">399元</dd>
					</dl>
				</div>
				<!-- 6 -->
				<div class="container_hh">
					<dl>
						<dt>
							<img src="img/haraware_xieya.png" alt="6" />
						</dt>
						<dd>Health智能血压计&nbsp;(蓝牙版)</dd>
						<dd class="product_song">送给父母的健康礼物</dd>
						<dd class="product_kang">199元</dd>
					</dl>
				</div>
				<!-- 7 -->
				<div class="container_ss">
					<dl>
						<dt>
							<img src="img/dianfanbao_icon05.jpg" alt="7" />
						</dt>
						<dd>小米智能摄像机&nbsp;夜视版</dd>
						<dd class="product_ting">能看能听能说，手机远程观看</dd>
						<dd class="product_shuo">149元</dd>
					</dl>
				</div>
				<!-- 8 -->
				<div class="container_pp">
					<dl>
						<dt>
							<img src="img/haraware_light.png" alt="8" />
						</dt>
						<dd>Yeelight床头灯</dd>
						<dd class="product_wo">触摸式操作，给卧室1600万种颜色</dd>
						<dd class="product_se">699元</dd>
					</dl>
				</div>
			</div>
			
			<!-- 搭配 -->
			<div class="star_da">
				<div class="star_pei">
					<p>搭配</p>
					</div>
				<div class="star_rr">
				<a href="">热门</a>
			   <a href="">耳机音响</a>
				<a href="">电源</a>
				<a href="">电池存储卡</a>
				</div>
			</div>
			
			<div class="dan">
				<!-- 小米电源单个 -->
				<div class="barrr">
					<img src="img/dapei_icon01.png" alt="0" />
				</div>
			</div>
				<!-- 小米移动电源 -->
				<div class="mi_dian">
					<!-- 1 -->
					<div class="container_you">
						<dl>
					<dt>
						<img src="img/dapei_icon03.png" alt="1" />
							</dt>
							<dd>小米路由器3</dd>
							<dd class="product_geng">更安全更稳定，安全发售</dd>
							<dd class="product_qq">149元</dd>
							</dl>
						</div>
						<!-- 2 -->
					<div class="container_me">
						<dl>
					<dt>
						<img src="img/dapei_icon04.png" alt="2" />
							</dt>
							<dd>小米手环&nbsp;光感版</dd>
							<dd class="product_ke">实时监测心率，科学运动</dd>
							<dd class="product_xue">99元</dd>
							</dl>
						</div>
					<!-- 3 -->
					<div class="container_three">
						<dl>
					<dt>
						<img src="img/dapei_icon05.png" alt="3" />
							</dt>
							<dd>小米智能安防套装</dd>
							<dd class="product_nin">智能警戒，为您的家增添一份安心</dd>
							<dd class="product_de">699元</dd>
							</dl>
						</div>
					<!-- 4 -->
					<div class="container_four">
						<dl>
					<dt>
						<img src="img/dapei_icon03.png" alt="4" />
							</dt>
							<dd>小米运动相机</dd>
							<dd class="product_bian">边玩边录边拍，手机随时分享</dd>
							<dd class="product_sui">399元</dd>
							</dl>
						</div>
						</div>
						<!-- 7折 -->
						<div class="yun">
							<!-- 7折单个 -->
							<div class="zhe">
								<img src="img/dapei_icon02.png" alt="0" />
							</div>
						</div>
						<!-- 小米摄像 -->
						<div class="mi_xiang">
							<!-- 1 -->
					<div class="container_kai">
						<dl>
						<dt>
					<img src="img/dapei_icon07.png" alt="1" />
						</dt>
						<dd>小米智能摄像机&nbsp;夜视版</dd>
				    	<dd class="product_kan">能看能听能说，手机远程观看</dd>
						<dd class="product_guan">149元</dd>
					</dl>
				</div>
				<!-- 2 -->
				<div class="container_hong">
					<dl>
				<dt>
					<img src="img/dapei_icon08.png" alt="2" />
						</dt>
						<dd>小米智能摄像机&nbsp;夜视版</dd>
						<dd class="product_teng">能看能听能说，手机远程观看</dd>
						<dd class="product_yi">149元</dd>
					</dl>
				</div>
				<!-- 3 -->
					<div class="container_tf">
					<dl>
				<dt>
					<img src="img/dapei_icon09.png" alt="3" />
						</dt>
							<dd>小米智能摄像机&nbsp;夜视版</dd>
							<dd class="product_five">能看能听能说，手机远程观看</dd>
							<dd class="product_dao">149元</dd>
						</dl>
					</div>
				</div>
	             <!-- 两张图 -->
			<div class="liang">
				<!-- 小米活塞耳机 -->
				<div class="huo">
					<img src="img/content-top_icon01.png" alt="1" />
				</div>
				<!-- 浏览 -->
				<div class="liu">
					<img src="img/content-top_icon02.png" alt="2" />
				</div>
			</div>
			<!-- 周边 -->
			<div class="star_zhou">
				<div class="star_bian">
					<p>周边</p>
					</div>
				<div class="star_kk">
				<a href="">热门</a>
			   <a href="">服装</a>
				<a href="">米兔</a>
				<a href="">生活周边</a>
				<a href="">箱包</a>
				</div>
			</div>
			<!-- 单个 插线板 -->
			<div class="cha">
				<!-- 小米插线板 -->
				<div class="xian">
					<img src="img/peijian_icon01.png" alt="0" />
				</div>
			</div>
			<!-- 小米插线板 -->
			<div class="mi_ban">
			<!-- 1 -->
			<div class="container_day">
				<dl>
			<dt>
				<img src="img/peijian_icon03.png" alt="1" />
					</dt>
					<dd>小米金属鼠标垫&nbsp;小号</dd>
					<dd class="product_jine">49元</dd>
					<dd class="product_ren">6483人评价</dd>
					</dl>
				</div>
				<!-- 2 -->
			<div class="container_rui">
			<dl>
				<dt>
				<img src="img/peijian_icon04.png" alt="2" />
					</dt>
					<dd>小米皮质记事本</dd>
					<dd class="product_jiaa">19元</dd>
					<dd class="product_ping">3050人评价</dd>
					</dl>
				</div>
				<!-- 3 -->
				<div class="container_wang">
					<dl>
				<dt>
				<img src="img/peijian_icon05.png" alt="3" />
					</dt>
					<dd>小米LED随身灯&nbsp;增强版</dd>
					<dd class="product_nin">19.9元</dd>
					<dd class="product_de">5.6万人评价</dd>
					</dl>
					</div>
				<!-- 4 -->
				<div class="container_yan">
					<dl>
				<dt>
				<img src="img/peijian_icon06.png" alt="4" />
					</dt>
					<dd>手机支架&nbsp;小蜜蜂</dd>
					<dd class="product_bian">19元</dd>
					<dd class="product_sui">6.9万人评价</dd>
				</dl>
					</div>
			</div>
			<!-- 蓝牙音响  单个-->
			<div class="lan">
				<!-- 单个 -->
				<div class="ya">
					<img src="img/peijian_icon02.png" alt="0" />
				</div>
			</div>
			<!-- 蓝牙音箱 -->
			<div class="mi_yin">
			<!-- 1 -->
			<div class="container_ya">
				<dl>
			<dt>
				<img src="img/peijian_icon07.png" alt="1" />
					</dt>
					<dd>小米防尘塞&nbsp;MI标</dd>
					<dd class="product_biao">3.9元</dd>
					<dd class="product_fa">5.6万人评价</dd>
					</dl>
				</div>
				<!-- 2 -->
			<div class="container_hai">
			<dl>
				<dt>
				<img src="img/peijian_icon08.png" alt="2" />
					</dt>
					<dd>小米智能摄像机&nbsp;夜视版</dd>
					<dd class="product_ye">149元</dd>
					<dd class="product_yee">8461人评价</dd>
					</dl>
				</div>
				<!-- 3 -->
				<div class="container_jie">
					<dl>
				<dt>
				<img src="img/peijian_icon09.png" alt="3" />
					</dt>
					<dd>小米电源线收纳盒</dd>
					<dd class="product_chu">39元</dd>
					<dd class="product_xian">8461人评价</dd>
					</dl>
					</div>
					</div>
			<!-- 两张图 -->
			<div class="zhang">
				<!-- 小米鼠标垫 -->
				<div class="shu">
					<img src="img/peijian_icon10.png" alt="1" />
				</div>
			<!-- 浏览 -->
			<div class="qian">
				<img src="img/content-top_icon02.png" alt="2" />
			</div>
			</div>
			<!-- 配件 -->
		<div class="star_jian">
			<div class="star_pe">
				<p>配件</p>
				</div>
			<div class="star_pp">
			<a href="">热门</a>
		   <a href="">保护套</a>
			<a href="">后盖</a>
			<a href="">贴膜</a>
			<a href="">其他配件</a>
			</div>
		</div>
		<!-- 单个 -->
	<div class="xin">
		<!-- 新品 -->
		<div class="chun">
			<img src="img/zhoubian_icon01.png" alt="0" />
		</div>
	</div>
	    <!-- 新品 -->
	<div class="mi_pin">
	<!-- 1 -->
	<div class="container_xia">
		<dl>
	<dt>
		<img src="img/zhoubian_icon03.png" alt="1" />
			</dt>
			<dd>小米自拍杆</dd>
			<dd class="product_zi">49元</dd>
			<dd class="product_pai">6.4万人评价</dd>
			</dl>
		</div>
		<!-- 2 -->
	<div class="container_pk">
	<dl>
		<dt>
		<img src="img/zhoubian_icon04.png" alt="2" />
			</dt>
			<dd>小米手机5&nbsp;钢化&nbsp;(0.22mm)</dd>
			<dd class="product_shu">29元</dd>
			<dd class="product_gang">1万人评价</dd>
			</dl>
		</div>
		<!-- 3 -->
		<div class="container_fa">
			<dl>
		<dt>
		<img src="img/zhoubian_icon05.png" alt="3" />
			</dt>
			<dd>红米手机Note3&nbsp;钢化膜(0.22mm)</dd>
			<dd class="product_no">699元</dd>
			<dd class="product_hua">8461人评价</dd>
			</dl>
			</div>
			<!-- 4 -->
			<div class="container_da">
				<dl>
			<dt>
			<img src="img/zhoubian_icon06.png" alt="4" />
				</dt>
				<dd>小米Note&nbsp;标准贴膜(2片装)</dd>
				<dd class="product_bb">19元</dd>
				<dd class="product_hh">2.1万人评价</dd>
				</dl>
				</div>
			</div>
			<!-- 单个 -->
			<div class="xx">
				<!-- 旅行箱 -->
				<div class="lv">
					<img src="img/zhoubian_icon02.png" alt="0" />
				</div>
			</div>
			<!-- 旅行箱 -->
		<div class="mi_gg">
		<!-- 1 -->
		<div class="container_rr">
			<dl>
		<dt>
			<img src="img/zhoubian_icon07.png" alt="1" />
				</dt>
				<dd>小米随身WIFI</dd>
				<dd class="product_suu">19.9元</dd>
				<dd class="product_ww">30.1万人评价</dd>
				</dl>
			</div>
			<!-- 2 -->
		<div class="container_fe">
		<dl>
			<dt>
			<img src="img/zhoubian_icon08.png" alt="2" />
				</dt>
				<dd>小米百变随身杯</dd>
				<dd class="product_bai">39元</dd>
				<dd class="product_be">1.2万人评价</dd>
				</dl>
			</div>
			<!-- 3 -->
			<div class="container_yy">
				<dl>
			<dt>
			<img src="img/zhoubian_icon09.png" alt="3" />
				</dt>
				<dd>小米手机5&nbsp;硅胶保护套</dd>
				<dd class="product_gui">69元</dd>
				<dd class="product_jiao">215人评价</dd>
				</dl>
				</div>
				</div>
			<!-- 两张图 -->
			<div class="zhi">
				<!-- 指环 -->
				<div class="huan">
					<img src="img/zhoubian_icon10.png" alt="1" />
				</div>
			<!-- 浏览 -->
			<div class="uu">
				<img src="img/content-top_icon02.png" alt="2" />
			</div>
			</div>
			<!-- 热评  -->
		<div class="star_chan">
			<div class="star_re">
				<p>热评产品</p>
				</div>
			</div>
			<!-- 热评 -->
			<div class="pinn">
				<!-- 1 -->
				<div class="container_re">
					<dl>
				<dt>
				<img src="img/hotproduct_icon01.png" alt="1" />
					</dt>
					<dd>超值正品，再也不会担心头那里时间久了坏掉，感觉升级版萌萌哒，既好用又好看</dd>
					<dd class="product_chao">来自于&nbsp;香草忘忧&nbsp;的评价</dd>
					<dd class="product_zai">米兔手机U盘</dd>
					<dd class="product_aa">49.9元</dd>
					</dl>
					</div>
				<!-- 2 -->
				<div class="container_tt">
					<dl>
				<dt>
				<img src="img/hotproduct_icon02.png" alt="2" />
					</dt>
					<dd>绝对5星，音质挺好，包装也不错，物流也快</dd>
					<dd class="product_jue">来自于&nbsp;星星活火&nbsp;的评价</dd>
					<dd class="product_dui">小米活塞耳机&nbsp;标准版</dd>
					<dd class="product_baoo">49.9元</dd>
					</dl>
					</div>
				<!-- 3 -->
				<div class="container_aii">
					<dl>
				<dt>
				<img src="img/hotproduct_icon03.png" alt="3" />
					</dt>
					<dd>做工没的说，摸起来非常细腻，而且比传统的插板稳固</dd>
					<dd class="product_lai">来自于&nbsp;林新城&nbsp;的评价</dd>
					<dd class="product_xing">小米插线板</dd>
					<dd class="product_bing">49元</dd>
					</dl>
					</div>
				<!-- 4 -->
				<div class="container_di">
					<dl>
				<dt>
				<img src="img/hotproduct_icon04.png" alt="4" />
					</dt>
					<dd>一如既往的发烧体验，炫酷外形，人性的设计，动听的音质！高低音表现平衡</dd>
					<dd class="product_ru">来自于&nbsp;人生如戏&nbsp;的评价</dd>
					<dd class="product_wai">小米头戴式耳机&nbsp;标准版</dd>
					<dd class="product_dong">499元</dd>
					</dl>
					</div>
			</div>
			<!-- 内容  -->
			<div class="star_rong">
				<div class="star_yy">
					<p>内容</p>
					</div>
				</div>
			<!-- 内容 -->
			<div class="neiii">
				<!-- 1 -->
				<div class="container_rong">
					<dl>
				<dt>
				<img src="img/classify_icon01.png" alt="1" />
					</dt>
					<dd>图书</dd>
					<dd class="product_mi">阿弥陀佛，么么哒</dd>
					<dd class="product_tu">大冰新书，12个不舍得读完的、暖心的，真实的江湖故事</dd>
					<dd class="product_nuan">9.99元</dd>
					</dl>
					</div>
				<!-- 2 -->
				<div class="container_nei">
					<dl>
				<dt>
				<img src="img/classify_icon02.png" alt="2" />
					</dt>
					<dd>主题</dd>
					<dd class="product_zhu">主题市场</dd>
					<dd class="product_zhong">众多个性主题、百变锁屏与自由桌面让你的手机与众不同！</dd>
					<dd class="product_suoo">MIUI</dd>
					</dl>
					</div>
				<!-- 3 -->
				<div class="container_bai">
					<dl>
				<dt>
				<img src="img/classify_icon03.png" alt="3" />
					</dt>
					<dd>游戏</dd>
					<dd class="product_zz">米柚手游模拟器</dd>
					<dd class="product_suuu">在电脑上玩遍小米所有手游</dd>
					<dd class="product_mm">免费</dd>
					</dl>
					</div>
				<!-- 4 -->
				<div class="container_mi">
					<dl>
				<dt>
				<img src="img/classify_icon04.png" alt="4" />
					</dt>
					<dd>应用</dd>
					<dd class="product_you">2015年度应用</dd>
					<dd class="product_shh">精彩世界，尽情下载</dd>
					<dd class="product_mian">免费</dd>
					</dl>
					</div>
			</div>
			<!-- 视频 -->
			<div class="star_shi">
				<div class="pinf">
					视频
					</div>
				<div class="star_ii">
					查看全部
				<img src="img/hardware_morebtn.png" alt="1" />
				</div>
			</div>
			<!-- 灰色 -->
			<div class="kkk"></div>
			<!-- 视频 -->
			<div class="dddn">
				<!-- 1 -->
		<div class="container_bk">
			<dl>
		<dt>
		<img src="img/video_icon01.jpg" alt="1" />
			</dt>
			<dd class="product_ooj">笑喷了，沈腾爆笑出演，6集联播</dd>
			<dd class="product_wjk">小米Max沈腾爆笑预告全集</dd>
			</dl>
			</div>
			<!-- 2 -->
			<div class="container_xiao">
				<dl>
			<dt>
			<img src="img/video_icon02.jpg" alt="2" />
				</dt>
				<dd class="product_shen">小米2016春季新品发布会</dd>
				<dd class="product_yuu">小米5&nbsp;十余项黑科技亮相</dd>
				</dl>
				</div>
				<!-- 3 -->
				<div class="container_chun">
					<dl>
				<dt>
				<img src="img/video_icon03.jpg" alt="3" />
					</dt>
					<dd class="product_miao">15秒了解小米5&nbsp;有多快</dd>
					<dd class="product_duo">华少用超快语速告诉你小米5&nbsp;到底有多快</dd>
					</dl>
					</div>
				<!-- 4 -->
				<div class="container_hua">
					<dl>
				<dt>
				<img src="img/video_icon04.jpg" alt="4" />
					</dt>
					<dd class="product_qu">《去探索》&nbsp;小米年度品牌视频</dd>
					<dd class="product_pp">与小米一起探索黑科技</dd>
					</dl>
					</div>
			</div>	
			
	</main>
		<footer>
			<!-- 服务 -->
			<div class="fuwu">
				<!-- 1 -->
				<div class="xf">
					<img src="img/footer_icon01.png" alt="" />
					<a href="">1小时快修服务</a>
				</div>
				<!-- 2 -->
				<div class="jj">
					<img src="img/footer_icon02.png" alt="" />
					<a href="">7天无理由退货</a>
				</div>
				<!-- 3 -->
				<div class="ttrc">
					<img src="img/footer_icon03.png" alt="" />
					<a href="">15天免费换修</a>
				</div>
				<!-- 4 -->
				<div class="mianb">
					<img src="img/footer_icon04.png" alt="" />
					<a href="">满150元包邮</a>
				</div>
				<!-- 5 -->
				<div class="wwj">
					<img src="img/footer_icon05.png" alt="" />
					<a href="">520余家售后网点</a>
				</div>
			</div>
		
		<!-- 页尾结构：切片7个空间 div>7个div -->
		<div class="footer_container">
			<!-- 帮助中心栏 -->
			<div class="column">
				<h3>帮助中心</h3>
				<ul>
					<li><a href="#">购物指南</a></li>
					<li><a href="#">支付方式</a></li>
					<li><a href="#">配送中心</a></li>
				</ul>
			</div>
			<!-- 服务支持栏 -->
				<div class="column">
					<h3>服务支持</h3>
					<ul>
						<li><a href="#">售后服务</a></li>
						<li><a href="#">自助服务</a></li>
						<li><a href="#">相关下载</a></li>
					</ul>
				</div>
			<!-- 线下门店栏 -->
			<div class="column">
				<h3>线下门店</h3>
				<ul>
					<li><a href="#">小米之家</a></li>
					<li><a href="#">服务网点</a></li>
					<li><a href="#">线下专心</a></li>
				</ul>
			</div>
			<!-- 关于小米栏 -->
			<div class="column">
				<h3>关于小米</h3>
				<ul>
					<li><a href="#">了解小米</a></li>
					<li><a href="#">加入小米</a></li>
					<li><a href="#">联系我们</a></li>
				</ul>
			</div>
			<!-- 关注我们栏 -->
			<div class="column">
				<h3>关注我们</h3>
				<ul>
					<li><a href="#">新浪微博</a></li>
					<li><a href="#">小米部落</a></li>
					<li><a href="#">官方微信</a></li>
				</ul>
			</div>
			<!-- 特殊服务栏 -->
			<div class="column">
				<h3>特殊服务</h3>
				<ul>
					<li><a href="#">F码通道</a></li>
					<li><a href="#">小米通道</a></li>
					<li><a href="#">防伪查询</a></li>
				</ul>
			</div>
			<!-- 客服信息栏 -->
			<div class="column contact_column">
				<h3>400-100-5678</h3>
				<p>周一至周日 8:00：18:00</p>
				<p>(仅收市话费)</p>
				<a href="#">24小时在线客服</a>
			</div>
		</div>
		
		<!-- 最后 -->
		<div class="shij"></div>
		<!-- 最 -->
		<div class="ootd">
			<!-- 小米图 -->
			<div class="xxx">
				<img src="img/LOGO.png" alt="" />
			</div>
			<!-- 文字1 -->
			<div class="weng">
				<a href="">小米网</a>
				<a href="">MIUI</a>
				<a href="">米聊</a>
				<a href="">多看书成</a>
				<a href="">小米路由器</a>
				<a href="">视频电话</a>
				<a href="">小米后院</a>
				<a href="">小米天猫店</a>
				<a href="">小米淘宝直营店</a>
				<a href="">小米网盟</a>
				<a href="">问题反馈</a>
				<a href="">Select Region</a>
			</div>
			<!-- 京证 -->
			<div class="jingg">
				<p>©mi.com京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号 违法和不良信息举报 电话：185-0130-1238本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
			</div>
			<!-- 图片 -->
			<div class="cheng">
				<!-- 诚信 -->
				<div class="xfd">
					<img src="img/safe_icon01.png" alt="" />
					<p>诚信网站师范企业</p>
				</div>
				<!-- 可信 -->
				<div class="mmg">
					<img src="img/safe_icon02.png" alt="" />
					<p>可信网站信用评价</p>
				</div>
				<!-- 交易 -->
				<div class="ggd">
					<img src="img/safe_icon03.png" alt="" />
					<p>网上交易保障中心</p>
				</div>
				
			</div>
			
		</div>
		
		</footer>
		</body>
	</html>